<template>
	<view class="body">
		<image src="@/static/image/mete.jpg" mode="widthFix" class="ww100"></image>
		<view class="card bg-white br12 m30 p30">
			<view class="d-b-c">
				<view class="f26 fb">江门市利洁能源加气站</view>
				<view class="d-c-c" :class="shou?'active':''">
					<text class="f24 mr10">收藏</text>
					<u-icon :name="shou?'star':'star-fill'" :color="shou?'#FF7E11':'#272636'" size="15"></u-icon>
				</view>
			</view>
			<view class="d-s-c mt30">
				<view class="distance d-s-c mr30">
					<u-icon name="map" color="#FF7E11" size="10"></u-icon>
					<text class="f20">30km</text>
				</view>
				<view class="f20">广东省江门市江海区五邑路与永康路交叉路口往南约90米</view>
			</view>
		</view>
		<view class="card bg-white br12 m30 p30 d-s-s d-c">
			<view class="d-b-c ww100">
				<view class="f26 fb">优惠活动</view>
				<view class="f20">更新时间：2025-3-21 00:00:00</view>
			</view>
			<view class="mt30 d-s-c">
				<u-tag text="LNG" size="mini" borderColor="transparent" bgColor="#EFEFEF" color="#000"></u-tag>
				<view class="f20 ml20">价格</view>
				<view class="f26 fb">￥</view>
				<view class="f30">5.5/L</view>
				<view class="shan gray9 f20 ml30">挂牌价￥5.5/L</view>
			</view>
		</view>
		<view class="card bg-white br12 m30 p30 d-s-s d-c">
			<view class="f26 fb">优惠活动</view>
			<view class="mt20">
				<u-tag shape="circle" text="自营店" borderColor="#FF7E11" bgColor="transparent" color="#000"></u-tag>
			</view>
		</view>
		<view class="card bg-white br12 m30 p30 d-s-s d-c">
			<view class="f26 fb">站点详情</view>
			<view class="red f20 mt10">各位司机朋友， 因目前上下班高峰期（早上7:00-9:30）车辆较多， 请各位司机朋友尽量错开高峰期。</view>
			<view class="red f20 mt20">站点联系方式：0757-0000000</view>
			<view class="gray9 f20 mt20">站点加气工：</view>
			<view class="item d-s-c mt20" v-for="(item,index) in 2" :key="index">
				<u-avatar size="30"></u-avatar>
				<view class="ml20">
					<view class="f20">
						<view class="mb10">
							<text class="mr20">小明</text>
							<text class="gray9">综合评分5</text>
						</view>
						<u-rate :count="4" v-model="rate" active-color="#FF7E11" inactive-color="#CECECE"></u-rate>
					</view>
				</view>
			</view>
		</view>
		<view class="card bg-white br12 m30 p30 d-s-s d-c">
			<view class="f26 fb">交易评价</view>
			<view class="list mt30 ww100">
				<view class="item d-s-c mb20 line ww100 pb20" v-for="(item,index) in 2" :key="index">
					<u-avatar size="30"></u-avatar>
					<view class="ml20 flex-1">
						<view class="f20">
							<view class="mb10 d-b-c ww100">
								<view class="">
									<text class="mr20">小明</text>
									<text class="gray9">2025-3-21</text>
								</view>
								<u-tag text="节约0元" size="mini" color="#fff" bgColor="#FF7E11"
									borderColor="transparent"></u-tag>
							</view>
							<u-rate :count="4" v-model="rate" active-color="#FF7E11" inactive-color="#CECECE"></u-rate>
						</view>
					</view>
				</view>
			</view>
			<view class="f20 gray9 tc ww100">查看更多评价</view>
		</view>
		<view class="bottom bg-white p30 d-b-c ww100">
			<view class="left d-s-c">
				<view class="d-c-c">
					<u-icon name="/static/image/phone2.png" size="20"></u-icon>
					<text class="f26 ml20">电话</text>
				</view>
				<view class="d-c-c ml40">
					<u-icon name="map-fill" color="#FF7E11" size="20"></u-icon>
					<text class="f26 ml20">导航</text>
				</view>
			</view>
			<view class="ww50" @click="jump('/pages/mete/pay')">
				<u-button text="点击支付" color="#FF7E11" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shou: true,
				rate: 3
			}
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		position: sticky;
		bottom: 0;
		left: 0;
		bottom: 0;
	}

	.body {
		min-height: 100vh;
		background-color: #f4f4f4;
	}

	.shan {
		text-decoration: line-through
	}

	.active {
		color: #FF7E11;
	}

	.distance {
		background-color: #EFEFEF;
		border-radius: 10rpx;
		padding: 8rpx 20rpx;
	}
</style>